import React, { Component } from 'react';
import LifeChild from './LifeChild';
class Life1 extends Component {
    // constructor() {
    //     super()
    //     console.log('constructor-数据初始化')
    //     this.state = {
    //         count: 0
    //     }
    // }
    state = {
                count: 0
            }
    /*
    * 顺序 constructor->render->componentDidMount->componentDidUpdate(有状态更新)-> render()->(有状态更新)
         componentDidUpdate(有状态更新)-> render()
    *  componentDidMount -> 1.  render之后真实dom已经挂载完成
                            2. 可以更新状态
                            3. 只执行一次
        componentDidUpdate -> 1. 只要sate发生变化都会走
                           -> 2. 不可以更新状态    
                           -> 3. 多次
        componentWillUnmount -> 在组件销毁之前调用，
                             -> 执行一次
                         通常是用来做一些清除动作，比如移除事件监听、清除定时器等等    
        render ->  1. 不可以更新状态
                   2. 执行多次
                         
        
    */
    // state = {  } 
    // UNKNOW_componentWillMount () {
    //    console.log('WillMount正在挂载')
    // }

    componentDidMount() {
        console.log('componentDidMount-render之后真是dom已经挂载完成')
        // this.timer = setInterval(() => {
        //     this.setState({
        //         count: this.state.count + 1
        //     })
        // }, 1000);
        console.log(document.getElementById('demo'))
    }
    componentDidUpdate() {
        console.log('DidUpdate数据更新')
    }
    componentWillUnmount() {
        console.log('组件正在卸载')
        clearInterval(this.timer)
    }
    render() {
        console.log('render')
        //  this.setState({
        //     count: this.state.count + 1
        //  })
        return (<div className='current'>
            componentWillMount<br />
            componentDidUpdate<br />
            componentWillUnmount<br />
            <div id='demo'>demo</div>
             <button onClick={() => {
               this.setState({
                 count: this.state.count + 1
               })
             }}>更新count</button>
            <LifeChild count={this.state.count}  />
            <br />
        </div>);
    }
}

export default Life1;